<template>
	<view :style="{ '--color': color }">
		<status-bar title=" " hideBg="1" statusHeight backColor :back="back"></status-bar>
		<swiper class="Swiper" :indicator-dots="false" :autoplay="false" circular :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<image :src="$imgUrls(item)" mode="aspectFill" class="wh"></image>
			</swiper-item>
		</swiper>

		<view class="Nav">
			<scroll-view :scroll-x="true" :scroll-into-view="scrollintoview" class="u-tabs nowrap">
				<view class="list" :class="{ Active: index == current }" :id="`tabs${index}`"
					v-for="(item, index) in open_date" :key="index" @click="click(index)">{{ item.name }}</view>
			</scroll-view>

			<view class="allNav" @click.stop="show = true">全部</view>
		</view>

		<view class="botBox" v-for="(item, index) in site_time" :key="index" v-if="current == index">
			<view class="listBox" v-for="(subItem, subIndex) in item" :key="subIndex">
				<view class="ImgBox">
					<image :src="$imgUrls(subItem.img)" mode="aspectFill" class="subItem_img"></image>
				</view>
				<view class="conList">
					<text class="title">{{ subItem.name }}</text>
					<view class="row m-top6" v-if="subItem.site_bao_fang.state == 0">
						<view class="privce_list" v-for="(tItem, tIndex) in subItem.all_price_info" :key="tIndex">
							{{ tItem.data }}
						</view>
					</view>
					<view class="tagBox" v-if="subItem.label && subItem.label.length">
						<view class="tabLi" v-for="(bItem, bIndex) in subItem.label" :key="bIndex">{{ bItem }}</view>
					</view>
					<view class="time" v-if="subItem.site_bao_fang.state == 0">
						<text class="time_name">开宴时间：</text>
						<text class="time_start">{{ subItem.open_time }}</text>
					</view>

					<view class="toBtn" :class="subItem.available_site > 0 ? 'Reserve' : 'fullBtn'"
						@click="NowReserve(subItem)" v-if="subItem.site_bao_fang.state == 0">
						{{subItem.available_title}}
						<!-- {{ subItem.available_site > 0 ? '预定' : '已满' }} -->
					</view>
					<view class="toBtn Reserve" v-if="subItem.site_bao_fang.state == 1" @click="NowReserve(subItem)">预定
					</view>
				</view>
			</view>
		</view>

		<view class="Contact">
			<view class="list" @click="$common.Tel(startUp.service_tel)">
				<text class="name">服务电话：{{ startUp.service_tel }}</text>
			</view>
			<view class="list" @click="openLocat">
				<view class="iconfont icon-a-zu1418 size34 color_99 m-right14"></view>
				<text class="name">地图导航</text>
			</view>
		</view>
		<contact></contact>

		<u-calendar :show="show" ref="calendar" :showSubtitle="false" mode="single" :color="color"
			:defaultDate="customList[current]" :customList="customList" monthNum="2" @confirm="confirm"
			@close="show = false">
		</u-calendar>

		<!-- 	<u-popup :show="showContent" mode="center" :round="10" :safeAreaInsetBottom="false">
			<view class="sowCone">
				<text class="row j-centert black size34 bold">预定须知</text>
				<view class="cponView">
					<u-parse :content="site_config.content"></u-parse>
				</view>
				<view class="botFot">
					<view class="notconti" @click="ageBtn">
						<text class="black size28">我已阅读并同意此协议</text>
						<text class="size28 black" v-if="ageTime > 0">({{ ageTime }}s)</text>
					</view>
				</view>
			</view>
		</u-popup> -->

		<!-- <u-popup :show="isOk" mode="center" :round="10" :safeAreaInsetBottom="false">
			<view class="sowCone" v-if="reconfirmData">
				<text class="size36 bold black p-top10 p-bot10 t-letter4">您预订的餐秀</text>
				<view class="row a-center black size30 p-top30 p-left20"
					>宴会名称：{{ reconfirmData.name }}
				</view>
				<view class="row a-center black size30 p-top30 p-left20"
					>宴会日期：{{ open_date[current].name }}</view
				>
				<view class="row a-center black size30 p-top30 p-left20"
					>开宴时间：{{ reconfirmData.open_time }}
				</view>
				
				<view class="row j-sa a-center m-top70 m-bot20">
					<view class="okbtn Cancel" @click="isOk = false">取消</view>
					<view class="okbtn Continue" @click="Config_btn">确定</view>
				</view>
			</view>
		</u-popup> -->
		<u-popup :show="isOk" mode="center" bgColor="transparent" :round="10" :safeAreaInsetBottom="false">
			<view class="sowCone" v-if="reconfirmData">
				<!-- <text class="size36 bold black p-top10 p-bot10 t-letter4">您预订的餐秀</text> -->
				<view class="row a-center p-top180 sowConelist">宴会名称：{{ reconfirmData.name }}
				</view>
				<view class="row a-center p-top10 sowConelist">宴会日期：{{ open_date[current].name }}</view>
				<view class="row a-center p-top10 sowConelist">开宴时间：{{ reconfirmData.open_time }}
				</view>

				<view class="row j-centert">
					<view class="okbtn Cancel" @click="isOk = false">取消</view>
					<view class="okbtn Continue" @click="Config_btn">确定</view>
				</view>
			</view>
		</u-popup>

		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
		<showKefu v-if="Service" @cancelFunc="Service = false"></showKefu>

		<tabBar :tab="1"></tabBar>

		<!-- <view class="SerBox">
			<view class="list" @click="Service = true">
				<view class="iconfont icon-a-008 color_920 size42"></view>
			</view>
			<view class="list" @click="openLocat">
				<view class="iconfont icon-daohang color_920 size42"></view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import showKefu from '@/components/showKefu.vue';
	export default {
		components: {
			showKefu,
		},
		data() {
			return {
				scrollintoview: '',
				Service: false,
				showModal: false,
				banner: [],
				customList: [],
				open_date: [],
				site_time: [],
				current: 0,
				inactiveStyle: {
					fontSize: '13px',
					color: '#606266',
				},
				activeStyle: {
					fontSize: '13px',
					color: '#000',
				},
				itemStyle: {
					height: '56px',
				},
				show: false,
				showContent: false,
				color: '#d85e59',
				site_config: '',
				ageTime: 3,
				ageFlge: false,
				ageDown: null,
				ageId: '',
				isOk: false,
				reconfirmData: '',
			};
		},

		onLoad() {
			this.getSiteTimeList();
		},

		methods: {
			getSiteTimeList() {
				this.$http
					.get({
						url: '/SiteApi/getSiteTimeList',
					})
					.then((res) => {
						if (res.code != 200) return this.$Toast(res.msg);
						const Result = res.data;
						this.site_config = Result.site_config;
						this.banner = Result.banner || [];
						this.customList = Result.open_calender || [];
						this.open_date = Result.open_date || [];
						this.site_time = Result.site_time_day_time || [];
						this.showContent = true;
						this.ageDown = setInterval(() => {
							if (this.ageTime > 0) {
								this.ageTime--;
							} else {
								clearInterval(this.ageDown);
							}
						}, 1000);
					});
			},
			NowReserve(reconfirmData) {
				if (!this.vid) return (this.showModal = true);
				const site_bao_fang = reconfirmData.site_bao_fang;
				if (reconfirmData.available_site <= 0 && site_bao_fang.state == 0)
					return this.$Toast(`坐席${reconfirmData.available_title}`);
				this.reconfirmData = reconfirmData;

				if (site_bao_fang.state == 1)
					return this.toUrl(`SelectBao?id=${this.reconfirmData.id}`);
				this.isOk = true;
			},
			click(index) {
				this.current = index;
				if (index <= 1) return (this.scrollintoview = `tabs0`);
				this.scrollintoview = `tabs${index - 1}`;
			},

			confirm(e) {
				const Index = this.customList.findIndex((n) => n == e[0]);
				this.current = Index;
				this.show = false;
			},

			ageBtn() {
				if (this.ageTime > 0) return;
				this.showContent = false;
			},
			CloseAge() {
				clearInterval(this.ageDown);
				this.showContent = false;
				this.ageTime = 3;
			},
			Config_btn() {
				this.isOk = false;
				this.toUrl(`Selectseat?id=${this.reconfirmData.id}`);
			},
			openLocat() {
				uni.openLocation({
					latitude: Number.parseFloat(this.startUp.lat),
					longitude: Number.parseFloat(this.startUp.lng),
					name: this.startUp.title,
					address: this.startUp.service_address,
					success() {
						console.log('打开成功');
					},
					fail(err) {
						console.log(err);
						uni.showToast({
							title: '打开失败!',
							icon: 'none',
						});
					},
				});
			},
		},
		onUnload() {
			clearInterval(this.ageDown);
			this.showContent = false;
		},
		onHide() {
			clearInterval(this.ageDown);
			this.showContent = false;
		},

		computed: {
			...mapState(['vid', 'startUp']),
		},
	};
</script>

<style lang="scss">
	page {
		background-color: $pages;
	}
</style>
<style lang="scss" scoped>
	.SerBox {
		position: fixed;
		right: 20rpx;
		top: 30%;
		display: flex;
		flex-direction: column;

		.list {
			width: 80rpx;
			height: 80rpx;
			background-color: rgba(255, 255, 255, 1);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20rpx;
		}
	}

	.sowCone {
		width: 680rpx;
		height: 544rpx;
		background-image: url('https://msraimgcdn.mogoie.com/6142/1735222456487.png');
		background-repeat: no-repeat;
		background-size: cover;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.sowConelist {
			padding-left: 140rpx;
			font-size: 30rpx;
			color: #000;
		}
	}

	.cponView {
		width: 100%;
		height: 760rpx;
		overflow-y: scroll;
		padding: 30rpx 10rpx;
	}

	.botFot {
		width: 100%;
		height: 130rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.notconti {
		width: 500rpx;
		height: 90rpx;
		background-color: #d7b06d;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.Swiper {
		width: 100%;
		height: 750rpx;
	}

	.Swiper swiper-item {
		width: 100%;
		height: 100%;
	}

	.Nav {
		width: 100%;
		height: 100rpx;
		background-color: $pages;
		margin-top: -20rpx;
		position: relative;
		z-index: 100;
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		box-shadow: rgba(51, 51, 51, 0.1) 0px -10px 30rpx;
	}

	.u-tabs {
		width: 630rpx;
		padding-left: 20rpx;

		.list {
			display: inline-block;
			padding: 14rpx 20rpx;
			color: #000;
			font-size: 30rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}

		.Active {
			background-image: linear-gradient(45deg, #d85e59 0%, #e59689 99%, #e59689 100%);
			color: #fff;
		}
	}

	.allNav {
		width: 120rpx;
		height: 100%;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		flex-shrink: 0;
	}

	.botBox {
		padding-bottom: 30rpx;
		padding: 10rpx;
	}

	.listBox {
		width: 100%;
		background-color: #ffffff;
		padding: 20rpx 20rpx 40rpx 20rpx;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: 20rpx;
	}

	.ImgBox {
		width: 176rpx;
		height: 176rpx;
		// background-color: $color_d9a;
		border-radius: 16rpx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
		flex-shrink: 0;

		.subItem_img {
			width: 176rpx;
			height: 176rpx;
			border-radius: 6rpx;
			overflow: hidden;
		}
	}

	.conList {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.Nowreserve {
		width: 240rpx;
		margin-left: 10rpx;
		position: relative;

		.NowTxt {
			color: #000;
			font-size: 26rpx;
			position: absolute;
			left: 20rpx;
			bottom: 12rpx;
			z-index: 100;
		}
	}

	.title {
		color: #000;
		font-weight: bold;
		font-size: 34rpx;
	}

	.time {
		margin-top: 14rpx;
		display: flex;
		align-items: center;

		.time_name {
			color: #666;
			font-size: 24rpx;
		}

		.time_start {
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
		}
	}

	.toBtn {
		width: 140rpx;
		height: 58rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		position: absolute;
		right: 20rpx;
		bottom: 18rpx;
		border-radius: 28rpx;
	}

	.Reserve {
		background-color: $color_d85;
		color: #fff;
	}

	.fullBtn {
		border: 1rpx solid $color_d85;
		color: $color_d85;
	}

	.privce_list {
		padding: 2rpx 4rpx;
		color: #666;
		font-size: 24rpx;
		font-weight: normal;
		margin-right: 6rpx;
	}

	.privce_list:nth-child(3n) {
		margin-right: 0 !important;
	}

	.tagBox {
		width: 100%;
		display: flex;

		.tabLi {
			padding: 4rpx 12rpx;
			// border: 1rpx solid $color_d85;
			// color: $color_d85;
			border: 1rpx solid $color_eec;
			color: $color_eec;
			margin-top: 14rpx;
			font-size: 22rpx;
			margin-right: 12rpx;
			border-radius: 6rpx;
		}

		.tabLi:last-child {
			margin-right: 0;
		}
	}

	.privce_discount {
		font-size: 20rpx;
		color: #981211;
		scale: 0.9;
	}

	.privce_Origina {
		font-size: 22rpx;
		color: #999;
		margin-top: 2rpx;
		text-decoration: line-through;
	}

	.RemainingBox {
		width: 100%;
		padding-left: 150rpx;
		padding-right: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.Remaining {
		color: #000;
		font-size: 24rpx;
		margin-right: 16rpx;
		margin-top: 6rpx;
	}

	/deep/.u-calendar-month__title {
		display: none !important;
	}

	.okbtn {
		width: 200rpx;
		height: 70rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		margin: 50rpx 14rpx 20rpx 14rpx;
	}

	.Cancel {
		background-color: #f1f1f1;
		color: #000;
	}

	.Continue {
		background-color: $color_d85;
		color: #ffffff;
	}

	.Contact {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 50rpx;

		.list {
			display: flex;
			align-items: center;
			margin: 0 4rpx;
			padding: 20rpx 10rpx;
		}

		.name {
			color: #b0a79d;
			font-size: 30rpx;
		}
	}
</style>